<template>
    <div class="bg-style">
        <TopBanner />
        <SearchNav />
        <!-- 商品分类 -->
        <div class="w center flex-row">
            <div class="all_category" ref="cateRef">
                <ul>
                    <!-- 商品一级分类 -->
                    <li class="child-menu">
                        <div>
                            <el-icon class="svg-style"><i-mdi-paperclip /></el-icon>
                            <span>实验耗材</span>
                        </div>
                        <div class="menu-list" data-index="1">
                            <div class="menu-block" v-for="(cat1, index) in getCateByIndex(0)" :key="index">
                                <div @click="search_category(cat1.categoryId)">{{ cat1.name }}</div>
                            </div>
                        </div>
                    </li>
                    <li class="child-menu">
                        <div>
                            <el-icon class="svg-style"><i-mdi-test-tube /></el-icon>
                            <span>化学试剂</span>
                        </div>
                        <div class="menu-list" data-index="2">
                            <!-- 二级分类 -->
                            <div class="menu-block" v-for="(cat1, index) in getCateByIndex(1)" :key="index">
                                <div @click="search_category(cat1.categoryId)">{{ cat1.name }}</div>
                                <ul>
                                    <li v-for="(cat2, index) in cat1['Childrens']">
                                        <a href="#" @click="search_category(cat2.categoryId, cat2.name)">
                                            {{ cat2.name }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="child-menu">
                        <div>
                            <el-icon class="svg-style"><i-mdi-rabbit /></el-icon>
                            <span>实验动物</span>
                        </div>
                        <div class="menu-list" data-index="3">
                            <!-- 二级分类 -->
                            <div class="menu-block" v-for="(cat1, index) in getCateByIndex(2)" :key="index">
                                <div @click="search_category(cat1.categoryId)">{{ cat1.name }}</div>
                                <ul>
                                    <li v-for="(cat2, index) in cat1['Childrens']">
                                        <a href="#" @click="search_category(cat2.categoryId, cat2.name)">
                                            {{ cat2.name }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="child-menu">
                        <div>
                            <el-icon class="svg-style"><i-mdi-laptop /></el-icon>
                            <span>技术服务</span>
                        </div>
                        <div class="menu-list" data-index="4">
                            <!-- 二级分类 -->
                            <div class="menu-block" v-for="(cat1, index) in getCateByIndex(3)" :key="index">
                                <div @click="search_category(cat1.categoryId)">{{ cat1.name }}</div>
                                <ul>
                                    <li v-for="(cat2, index) in cat1['Childrens']">
                                        <a href="#" @click="search_category(cat2.categoryId, cat2.name)">
                                            {{ cat2.name }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="child-menu">
                        <div>
                            <el-icon class="svg-style"><i-mdi-flask /></el-icon>
                            <span>生物试剂</span>
                        </div>
                        <div class="menu-list" data-index="5">
                            <!-- 二级分类 -->
                            <div class="menu-block" v-for="(cat1, index) in getCateByIndex(4)" key="index">
                                <div @click="search_category(cat1.categoryId)">{{ cat1.name }}</div>
                                <ul>
                                    <li v-for="(cat2, index) in cat1['Childrens']">
                                        <a href="#" @click="search_category(cat2.categoryId, cat2.name)">
                                            {{ cat2.name }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="child-menu">
                        <div>
                            <el-icon class="svg-style"><i-mdi-microscope /></el-icon>
                            <span>科研仪器</span>
                        </div>
                        <div class="menu-list" data-index="6">
                            <!-- 二级分类 -->
                            <div class="menu-block" v-for="(cat1, index) in getCateByIndex(5)" key="index">
                                <div @click="search_category(cat1.categoryId)">{{ cat1.name }}</div>
                                <ul>
                                    <li v-for="(cat2, index) in cat1['Childrens']">
                                        <a href="#" @click="search_category(cat2.categoryId, cat2.name)">
                                            {{ cat2.name }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li class="child-menu">
                        <div>
                            <el-icon class="svg-style"><i-mdi-printer /></el-icon>
                            <span>办公用品</span>
                        </div>
                        <div class="menu-list" data-index="7">
                            <!-- 二级分类 -->
                            <div class="menu-block" v-for="(cat1, index) in getCateByIndex(6)" key="index">
                                <div @click="search_category(cat1.categoryId)">{{ cat1.name }}</div>
                                <ul>
                                    <li v-for="(cat2, index) in cat1['Childrens']">
                                        <a href="#" @click="search_category(cat2.categoryId, cat2.name)">
                                            {{ cat2.name }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="carousel">
                <div class="block text-center" m="t-4">
                    <el-carousel trigger="click">
                        <el-carousel-item v-for="item in 4" :key="item">
                            <div class="small justify-center" text="2xl">{{ item }}</div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
            <div class="info-box"></div>
        </div>

        <!-- 品牌广告 -->
        <div class="w brand_ad flex-row">
            <a href="#">
                <img src="@/assets/img/brand1.jpg" alt="" width="190" height="120" />
            </a>
            <a href="#">
                <img src="@/assets/img/brand1.jpg" alt="" width="190" height="120" />
            </a>
            <a href="#">
                <img src="@/assets/img/brand1.jpg" alt="" width="190" height="120" />
            </a>
            <a href="#">
                <img src="@/assets/img/brand1.jpg" alt="" width="190" height="120" />
            </a>
            <a href="#">
                <img src="@/assets/img/brand1.jpg" alt="" width="190" height="120" />
            </a>
            <a href="#">
                <img src="@/assets/img/brand1.jpg" alt="" width="190" height="120" />
            </a>
        </div>
        <!-- 中部宣传栏 -->
        <div class="content w" ref="domRef">
            <MiddleTitle value="品牌推荐" />
            <div class="brand-block" style="background-color: #ffffff">
                <ul>
                    <li v-for="item in newlist" :key="item[0].brandId" @click="search_brand(item[0].brandId)">
                        <img :src="item[0].photo" :title="item[0].brandName" />
                    </li>
                </ul>
            </div>
            <MiddleTitle value="商家推荐" />
            <MiddleTitle value="为你推荐" />
            <MiddleTitle value="类目推荐" />
        </div>
    </div>
</template>

<script setup>
import { nextTick, ref } from 'vue';
import router from '@/router/index';
import TopBanner from '@components/top-banner.vue';
import MiddleTitle from '@components/middle-title.vue';
import { userStore, categoryStore } from '@/store/index.js';
import SearchNav from '@/components/search-nav.vue';
let domRef = ref();
let categorys = categoryStore.getCategorys;
let brands = categoryStore.getBrands;
let newlist = ref([]);
//只获取指定的分类
let getCateByIndex = index => {
    let CATE_ID = [1, 51, 56, 113, 518, 700, 701];
    let res = categorys.filter(obj => obj.categoryId === CATE_ID[index]);
    return res[0]['Childrens'];
};
let getBandByID = () => {
    let Band_ID = [236, 298, 376, 415, 517, 596, 763, 930, 1581, 1807, 2082, 3425, 3822, 3863];
    for (let index = 0; index < Band_ID.length; index++) {
        const element = Band_ID[index];
        let res = brands.filter(obj => obj.brandId === element);
        newlist.value.push(res);
    }
    return newlist;
};
getBandByID();
console.log(newlist.value);
let search_category = id => {
    console.log(id);
    let path = router.resolve({ path: '/search', query: { categoryids: id } });
    window.open(path.href, '_blank');
};
let search_brand = id => {
    console.log(id);
    let path = router.resolve({ path: '/search', query: { brandids: id } });
    window.open(path.href, '_blank');
};
nextTick(() => {
    userStore.UserInfo();
});
</script>

<style lang="scss" scoped>
.bg-style {
    background-color: $bgc;
}

.center {
    margin-top: 8px;
    justify-content: space-between;
}

// 左侧分类
.all_category {
    > ul {
        margin-top: 0;
        padding-left: 0;
        letter-spacing: 4px;
        background-color: #fff;
        > li {
            width: 190px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            cursor: pointer;
        }
        > li:not(:last-child) {
            border-bottom: 1px solid #e5e5e5;
        }
    }
}

// 触摸显示二级菜单
.child-menu {
    position: relative;
    &::after {
        position: absolute;
        top: 4%;
        left: 82%;
        // display: none;
        content: url('@/assets/img/arrow.svg');
        opacity: 0; /* 初始不可见 */
        transition: opacity 0.3s; /* 平滑过渡效果 */
        pointer-events: none; /* 防止伪元素干扰鼠标事件 */
    }
    &:hover::after {
        opacity: 1;
    }

    .menu-list {
        overflow: auto;
        padding-top: 4px;
        position: relative;
        border: 1px solid #e5e5e5;
        left: 100%;
        width: 1010px;
        height: 310px;
        z-index: 4;
        display: none;
        background-color: #fff;
        > div {
            line-height: 28px;
            font-size: 14px;
            color: #333;
        }
    }
    .menu-block {
        margin-bottom: 8px;
    }
    .menu-block div {
        color: #1f528a;
        text-align: center;
        font-size: 14px;
    }
    .menu-block ul {
        flex-wrap: wrap;
        display: flex;
        flex-direction: row;
        align-items: center;

        li {
            &:not(:last-child) {
                position: relative;
                border-width: 2px;
                &::after {
                    content: '';
                    border-left: 1px solid #e5e5e5;
                    display: inline-block;
                    height: 14px;
                    position: absolute;
                    top: 25%;
                    right: 0;
                }
            }
        }
    }
    li a {
        color: #7e7e7e;
        padding: 0 10px;
    }
    // menu-list 偏移量
    @for $i from 1 through 10 {
        .menu-list[data-index='#{$i}'] {
            top: $i * (-45px);
        }
    }
    &:hover .menu-list {
        display: block;
    }
}

.svg-style {
    font-size: 26px;
    color: $blue2;
    margin-right: 8px;
    vertical-align: -24%;
}

// 轮播图
.carousel {
    width: 800px;
    height: 314px;
}
.demonstration {
    color: var(--el-text-color-secondary);
}
.el-carousel__container {
    height: 314px;
}
.el-carousel__item h3 {
    color: #475669;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
    text-align: center;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

// 消息通知
.info-box {
    width: 190px;
    height: 314px;
    background: #d3dce6;
    // border: 1px solid red;
}
.ulson li {
    border-top: 1px dashed #ccc;
}
.ulson li:first-child {
    border-top: none;
}

.brand_ad {
    justify-content: space-between;
}

.brand-block {
    ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    ul > li {
        width: 140px;
        height: 90px;
        border: 1px solid #cdcdcd;
        margin: 10px;
        position: relative;
        cursor: pointer;
    }
    ul > li > img {
        width: 120px;
        height: 70px;
        object-fit: contain;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>
